// 引入react
import * as React from 'react';
import {StyleSheet,View,Text,Switch} from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';

/**
 * @Description:
 * @author TangYong
 * @date 2022/12/16
 */
export class CardItemSwitch extends React.Component {

    constructor(props) {
        super(props);
        this.state = {

        };
    }
    //生命周期：组件挂载后
    componentDidMount() {
    }

    //方法
    toggleSwitch=()=>{
        this.props.onValueChange()
    }
    //DOM
    render() {
        return (
            <View style={style.Item}>
                <Text style={style.Text}>{this.props.title}</Text>
                <View style={style.right}>
                    {/*<Text numberOfLines={1} style={style.statusText}>{this.props.value}</Text>*/}
                    <Switch
                    trackColor={{ false: "#9FA5AB", true: "#409EFF" }}
                    thumbColor={this.props.value ? "#FFF" : "#FFF"}
                    ios_backgroundColor="#9FA5AB"
                    onValueChange={this.toggleSwitch}
                    value={this.props.value}
                    />
                </View>
            </View>
        )
    }

}

const style = StyleSheet.create({
    //样式
    Item: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        // paddingLeft:3,
        // paddingRight:3,
        //backgroundColor: 'red',
        paddingTop: 18,
        paddingBottom: 18,
    },
    Text: {

        // fontsize:"bold",
        flexDirection: 'row',
        color: '#111',
        fontSize: 16,
        textAlign: 'center',
    },
    right: {
        flexDirection: 'row',
    },
    statusText: {
        color: '#798188',
        marginRight: 5,
        fontSize: 13,
        maxWidth: 160,
    },
    icon: {
        color: '#798188',
        fontSize: 16,
    },
})
